<template>
   <div>
     <!-- 面包屑 -->
     <v-breadcrumb></v-breadcrumb>

    <!-- 添加按钮 -->
    <el-button type="primary" plain size="small" class="m20" @click="add">添加</el-button>

    <!-- 角色列表 -->
    <v-list @edit="editItem"></v-list>

    <!-- 弹框 -->
    <v-dialog :info="info" @cancel="cancel" ref="dialog"></v-dialog>

   </div>
</template>

<script>
import vList from "./list.vue"
import vDialog from "./dialog.vue"
export default {
    components:{
        vList,
        vDialog
    },
    data(){
        return {
            info:{
                isshow:false,  //是否显示弹框
                isadd:true   //是添加还是编辑
            }
        }
    },
    methods:{
        //1.点击添加按钮
        add(){
            this.info.isshow = true;
            this.info.isadd = true;
        },
        //2.点击取消关闭弹窗
        cancel(){
            this.info.isshow = false;
        },
        //点击编辑按钮
        editItem(id){
            //弹框
            this.info.isshow = true;
            this.info.isadd = false;
            //显示弹框数据
            this.$refs.dialog.lookup(id);
        }
    }


}
</script>

<style>

</style>